<template>
  <div class="qbls" ref="scorll" @scroll="scroll1">
    <div class="title">
      <span @click="$router.go(-1)">返回</span>
      <span>课程讲师</span>
      <span></span>
    </div>
    <!-- tab -->
    <van-tabs v-model:active="obj.active" @click-tab="tabdj">
      <van-tab
        v-for="(item, index) in obj.tabs"
        :title="item.name"
        :name="item.id"
      >
      </van-tab>
    </van-tabs>
    <div class="slkp" v-for="(item, index) in obj.list" @click="tiaoxq(item)">
      <img class="ii" :src="item.avatar" alt="" />
      <div class="box">
        <p>{{ item.name }}</p>
        <span>{{ item.teacher_info }}</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref, toRefs } from "vue";
import { getjstab, getsyjs } from "../http/api.js";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const scorll = ref(null);
const obj = reactive({
  active: 0,
  tabs: [],
  id: "0",
  page: 1,
  list: [],
});
// 跳名师详情
const tiaoxq = (i) => {
  router.push({ path: "/msxq", query: { id: i.teacher_id } });
  //   console.log(i);
};
// 滚动盒子
const scroll1 = (e) => {
  //   console.log(1);
  let offsetHeight = scorll.value.offsetHeight;
  let scrollTop = scorll.value.scrollTop;
  let scrollHeight = scorll.value.scrollHeight;
  if (offsetHeight + scrollTop >= scrollHeight - 1) {
    console.log(obj.page);
    obj.page++;
    // console.log(11);

    getjss();
  }
};
// 点击tab切换
const tabdj = () => {
  obj.page = 1;
  obj.list = [];
  getjss();
};
// 获取所有讲师
const getjss = async () => {
  const res = await getsyjs(obj.active, obj.page);
  obj.list = [...obj.list, ...res.data.data];
};
// 获取素有tab
const gettab = async () => {
  const res = await getjstab();
  obj.tabs = res.data.data;
};
getjss();
gettab();
</script>
<style lang="scss" scoped>
.ii {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-right: 15px;
}
.slkp {
  display: flex;
  padding: 20px 15px;
  span {
    font-size: 12px !important;
    color: #ccc;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -moz-box;
    -moz-line-clamp: 2;
    -moz-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
  }
  p {
    padding: 15px 0;
  }
}
* {
  font-size: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.qbls {
  height: 100vh;
  overflow: auto !important;
}
.title {
  display: flex;
  justify-content: space-between;
  padding: 15px;
  span {
    font-size: 36px;
  }
}
</style>
